import React from "react";
import {RGB} from "../model/color";

interface Props {
    color:RGB;
    onColorUpdate:(color:RGB) => void;
}

export const ColorPicker:React.FC<Props> = function(props) {
    const {color,onColorUpdate} = props;
    const {red,green,blue} = color;
    return (
        <div>
           <input type="range" min="0" max="255" value={red} onChange={ e => {
                onColorUpdate({
                    ...color,
                    red:Number(e.target.value)
                });
            }}/>:{red}
            <br />
            <input type="range" min="0" max="255" value={green} onChange={ e => {
                onColorUpdate({
                    ...color,
                    green:Number(e.target.value)
                });
            }}/>:{green}
            <br />
            <input type="range" min="0" max="255" value={blue} onChange={ e => {
                onColorUpdate({
                    ...color,
                    blue:Number(e.target.value)
                });
            }}/>:{blue}
        </div>
    )
}